<template>
  <div class="Allpadding Toppadding">
      <my-head title="修改密码"></my-head>
        <div class="logo">
                <img src="@/assets/image/logo.png" alt="">     
        </div>
            <p class="font_p">一个账号玩转所有服务</p>
        <div class="cahngePass">

            <van-form  @submit="onSubmit">
             <van-field
                v-model="form.password1"
                name="password1"
                label="旧密码"
                placeholder="请输入旧密码"
                clearable
               type="text"
            />
            <van-field
                v-model="form.password2"
                name="password2"
                label="新密码"
                placeholder="请输入新密码"
                clearable
                :type="type"
                 :right-icon="type=='password'?'closed-eye':'eye-o'"
                @click-right-icon="changeType"
                :rules="[
                    { required: true, message: '请填写密码' },
                    {
                        pattern:reg.pwd,message:'请输入6-16的数字字母组合'
                    }
                ]"
            />
             <van-field
                v-model="form.password3"
                name="password3"
                label="确认新密码"
                placeholder="请输入确认新密码"
                clearable
                :type="type1"
                :right-icon="type1=='password'?'closed-eye':'eye-o'"
                @click-right-icon="changeType1"
                :rules="[
                    { required: true, message: '请填写密码' },
                    {
                        pattern:reg.pwd,message:'请输入6-16的数字字母组合'
                    },
                    {
                        validator:checkPass,message:'两次密码不一致'
                    }
                ]"
            />
            <div style="margin: 16px;">
                <van-button  block type="danger" native-type="submit" style="font-size:20px; border-radius: 20px;">修改提交</van-button>
            </div>
        </van-form>
             
        </div>

        <div class="footer">
                    <div>从这里出发，开启新世界 </div>
                    <p>客服电话:<span style="color:#fb7299;margin-top:10px">18671643106</span></p>
        </div>

  </div>
</template>

<script>
export default {
data() {
    return {
            form:{},
             type:'password',
            type1:'password',
        
    }
},
methods: {
     
            //改变输入密码和确认密码的眼睛图标
        changeType(){
            this.type = this.type =='password' ?'text':'password'
        }, 
        changeType1(){
            this.type1 = this.type1 =='password' ?'text':'password'
        },
    //验证二次输入密码
        checkPass(val){
            if(this.reg.pwd.test(this.form.password2)){
                return val == this.form.password2;
            }
        },
   async onSubmit(values) {
      console.log('submit', values);
      //用当前号码去查询旧密码
      let phone= this.userInfo.phone
      //修改密码，查询旧密码，是否正确
      console.log(phone);
       let res = await this.$ajax.findUser({
           phone:phone,
       })
        if(res.length>0){
            let old_password=res[0].password
            let new_pasword=values.password2

            if(old_password==values.password1){
                this.$ajax.setUser({
                    password:new_pasword
                },res[0].id).then(res=>{         

              this.$toast.success('修改成功')      
                
              //修改成功后退出登录，删除vuex存储的用户数据
             this.changeUserInfo(null)
             
             //清除后跳转到登录界面重新登录
             this.$router.push({
                name:'login'
               })                       
                                })
                 
            }else{
                this.$toast('旧密码输入错误')
            }

        }

    },
},
}
</script>

<style>
.logo{
    margin-top: 10px;
    width: 150px;
    height: 100px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
}
.font_p{
     font-size: 16px;
    text-align: center;
}
.logo img{
    width: 100%;
}
.cahngePass{
    margin-top: 20px;
}
.van-button--danger{
    background: #fb7299;
    border: #fb7299;
}
.footer{
    position: absolute;
    bottom:0px;
    width: 100%;
    height: 100px;
    text-align: center;
   
}
</style>